<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>黑白棋</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <form id="form">
    <div class="form-item">
      <div class="item">服务器地址：</div>
      <div class="form-area">
        <label>
          <input class="input input-text" type="url" name="server" id="server"
            value="http://121.40.233.220:8080/blackandwhite" />
        </label>
      </div>
    </div>
    <div class="form-item">
      <div class="item">颜色：</div>
      <div class="form-area">
        <input class="input" type="radio" name="color" id="color1" value="1" checked />
        <label for="color1">
          黑色
        </label>
        <input class="input ml30" type="radio" name="color" id="color2" value="2" />
        <label for="color2">
          白色
        </label>
      </div>
    </div>
    <div class="form-item">
      <div class="item">模式：</div>
      <div class="form-area">
        <input class="input" type="radio" name="gameType" id="gameType1" value="0" checked />
        <label for="gameType1">
          自我娱乐
        </label>
        <input class="input ml30" type="radio" name="gameType" id="gameType2" value="1" />
        <label for="gameType2">
          与云端AI娱乐
        </label>
        <input class="input ml30" type="radio" name="gameType" id="gameType3" value="2" />
        <label for="gameType3">
          与本地AI娱乐
        </label>
      </div>
    </div>
    <div class="form-item">
      <div class="item">棋盘宽度：</div>
      <div class="form-area">
        <input class="input" type="radio" name="dimension" id="dimension1" value="0" checked />
        <label for="dimension1">
          8 X 8
        </label>
        <input class="input ml30" type="radio" name="dimension" id="dimension2" value="1" />
        <label for="dimension2">
          10 X 10
        </label>
      </div>
    </div>
    <div class="form-item">
      <div class="item"></div>
      <div class="form-area">
        <button class="btn" id="btn-start">开始游戏</button>
      </div>
      <div class="item"></div>
    </div>
  </form>
  <div id="container" class="none">
  </div>
  <script src="js/game.js"></script>
  <script src="js/chess.js"></script>
  <script>
    (function () {
      window.gameConfig = {
        color: 1, // 默认黑色
        gameType: 0, // 默认自我娱乐模式
        dimension: 0, // 0 8 X 8
        dimensions: 8, // 默认 8 X 8
        minWidth: Math.min(document.body.clientWidth, document.body.clientHeight) * 0.8,
        width: Math.floor(Math.min(document.body.clientWidth, document.body.clientHeight) * 0.8) / 8,
        server: 'http://121.40.233.220:8080/blackandwhite',
        board: new chessBoard(8, Math.floor(Math.min(document.body.clientWidth, document.body.clientHeight) * 0.8) / 8, utils.container, 1, 2).initBoard().initDirect().getFall(),
        container: utils.container,
        computerResponseChess: null,
      }
      const wraps = document.getElementsByClassName('chess-wrap')
      function makeBoard() {
        const width = Math.floor(gameConfig.minWidth / gameConfig.dimensions)
        gameConfig.width = width
        gameConfig.board = new chessBoard(gameConfig.dimensions, width, utils.container, gameConfig.color === 1 ? 1 : 2 , 3 - gameConfig.color).initBoard().initDirect().getFall()
      }

      const resizeBoard = function () {
        gameConfig.minWidth = Math.min(document.body.clientWidth, document.body.clientHeight) * 0.8
        const width = Math.floor(gameConfig.minWidth / gameConfig.dimensions)
        gameConfig.width = width
        gameConfig.board._infoDom.style.top = width * gameConfig.dimensions + 'px'
        gameConfig.board.resize(width)
      }

      utils.addEvent(document.getElementsByClassName('input'), 'change', function (evt) {
        const target = evt.currentTarget
        gameConfig[target.name] = /^\d*$/g.test(target.value) ? parseInt(target.value, 10) : target.value
        if (target.name === 'dimension') {
          gameConfig.dimensions = gameConfig.dimension === 0 ? 8 : 10
          makeBoard()
        }
        console.table(gameConfig)
      })
      utils.addEvent(document.getElementById('btn-start'), 'click', function (evt) {
        evt.preventDefault()
        utils.toggleClass(document.getElementById('form'), document.getElementById('container'), 'none')
        gameConfig.board = new chessBoard(gameConfig.dimensions, gameConfig.width, utils.container, gameConfig.color === 1 ? 1 : 2, 3 - gameConfig.color).initBoard().initDirect().getFall()
        // utils.ajax({
        //         url: gameConfig.server + '/openGame',
        //         type: 'post',
        //         data: {
        //             param: {
        //                 dimension:  gameConfig.dimensions,
        //                 gameType: gameConfig.gameType
        //             },
        //             ip: "",
        //             sid: "",
        //             timestamp: 0
        //         },
        //         dataType: 'json',
        //         timeout: 1000,
        //         contentType: 'application/json',
        //         success: function (data) {
        //             data = JSON.parse(data)
        //             if (data.opFlag) {
        //                 gameConfig.gameId = data.serviceResult.data.gameId
        //                 utils.ajax({
        //                   url: gameConfig.server + '/chooseColor',
        //                   type: 'post',
        //                   data: {
        //                     param: {
        //                       colorType: gameConfig.color,
        //                       gameId: gameConfig.gameId
        //                     },
        //                     ip: "",
        //                     sid: "",
        //                     timestamp: 0
        //                   },
        //                   dataType: 'json',
        //                   timeout: 1000,
        //                   contentType: 'application/json',
        //                   success: function (data) {
        //                     data = JSON.parse(data)
        //                     if (data.opFlag) {
        //                       console.log('data', data)
        //                     }
        //                   },
        //                   error: function (e) {
        //                     console.log('error', e)
        //                   }
        //                 })
        //             }
        //         },
        //         error: function (e) {
        //             console.log('error', e)
        //         }
        //     })
        utils.addEvent(window, 'resize', resizeBoard)
      })
      makeBoard()
    })()
  </script>
</body>

</html>